/**
 * 设计Token系统
 *
 * 移动端适配的设计token定义，遵循原子化设计原则
 */

/**
 * 断点定义
 */
export const breakpoints = {
  mobile: 768,
  tablet: 1024,
  desktop: 1280,
  wide: 1536,
} as const;

/**
 * 响应式字体大小 Scale
 *
 * 基于4px基础单位，移动端优先设计
 */
export const fontSize = {
  // 移动端字体
  mobile: {
    xs: { size: '12px', lineHeight: '16px' },     // 极小文本
    sm: { size: '14px', lineHeight: '20px' },     // 小文本
    base: { size: '16px', lineHeight: '24px' },   // 基础文本（推荐）
    lg: { size: '18px', lineHeight: '28px' },     // 大文本
    xl: { size: '20px', lineHeight: '32px' },     // 特大文本
    '2xl': { size: '24px', lineHeight: '36px' },  // 标题
  },

  // 桌面端字体
  desktop: {
    xs: { size: '12px', lineHeight: '16px' },
    sm: { size: '14px', lineHeight: '20px' },
    base: { size: '16px', lineHeight: '24px' },
    lg: { size: '18px', lineHeight: '28px' },
    xl: { size: '22px', lineHeight: '32px' },
    '2xl': { size: '28px', lineHeight: '40px' },
    '3xl': { size: '36px', lineHeight: '48px' },
    '4xl': { size: '48px', lineHeight: '56px' },
  },
} as const;

/**
 * 移动端间距系统
 *
 * 基于4px基础单位，确保视觉一致性
 */
export const spacing = {
  // 移动端间距（紧凑）
  mobile: {
    xs: 4,    // 0.25rem
    sm: 8,    // 0.5rem
    md: 12,   // 0.75rem
    lg: 16,   // 1rem
    xl: 24,   // 1.5rem
    '2xl': 32,  // 2rem
    '3xl': 40,  // 2.5rem
  },

  // 桌面端间距（舒适）
  desktop: {
    xs: 8,    // 0.5rem
    sm: 12,   // 0.75rem
    md: 16,   // 1rem
    lg: 24,   // 1.5rem
    xl: 32,   // 2rem
    '2xl': 48,  // 3rem
    '3xl': 64,  // 4rem
    '4xl': 80,  // 5rem
  },
} as const;

/**
 * 触摸目标最小尺寸
 *
 * 遵循iOS HIG和Material Design标准
 */
export const touchTarget = {
  // iOS HIG标准：44x44pt
  minSize: 44,

  // Material Design标准：48x48dp
  minSizeMaterial: 48,

  // 推荐最小间距（避免误触）
  minSpacing: 8,

  // 舒适间距
  comfortableSpacing: 12,
} as const;

/**
 * 移动端颜色对比度优化
 *
 * WCAG AA级标准，确保移动端可读性
 */
export const colors = {
  // 文本颜色
  text: {
    primary: '#1a1a1a',         // 主要文本（对比度4.5:1以上）
    secondary: '#4a4a4a',       // 次要文本
    tertiary: '#8a8a8a',        // 辅助文本
    inverse: '#ffffff',         // 反色文本
    disabled: '#c0c0c0',        // 禁用文本
  },

  // 背景颜色
  background: {
    primary: '#ffffff',         // 主背景
    secondary: '#f5f5f5',       // 次背景
    tertiary: '#eeeeee',        // 三级背景
    inverse: '#1a1a1a',         // 反色背景
  },

  // 品牌色
  brand: {
    primary: '#1890ff',         // 主色
    secondary: '#52c41a',       // 辅助色
    accent: '#fa8c16',          // 强调色
  },

  // 功能色
  functional: {
    success: '#52c41a',         // 成功
    warning: '#faad14',         // 警告
    error: '#f5222d',           // 错误
    info: '#1890ff',            // 信息
  },

  // 边框颜色
  border: {
    default: '#d9d9d9',
    light: '#f0f0f0',
    dark: '#8c8c8c',
  },
} as const;

/**
 * Z-index层级管理
 *
 * 避免层级冲突，确保移动端弹层正确显示
 */
export const zIndex = {
  base: 0,              // 基础层
  dropdown: 1000,       // 下拉菜单
  sticky: 1020,         // 固定定位
  fixed: 1030,          // 固定元素
  modalBackdrop: 1040,  // 模态框背景
  modal: 1050,          // 模态框
  popover: 1060,        // 气泡卡片
  tooltip: 1070,        // 工具提示
  notification: 1080,   // 通知
} as const;

/**
 * 移动端圆角
 */
export const borderRadius = {
  none: 0,
  sm: 4,      // 小圆角
  md: 8,      // 中等圆角
  lg: 12,     // 大圆角
  xl: 16,     // 特大圆角
  full: 9999, // 完全圆角
} as const;

/**
 * 阴影
 *
 * 移动端阴影更轻量，避免视觉干扰
 */
export const shadows = {
  none: 'none',
  sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
  md: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
  lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
  xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1)',
} as const;

/**
 * 过渡动画
 *
 * 移动端动画更快速，提升响应感
 */
export const transitions = {
  fast: '150ms cubic-bezier(0.4, 0, 0.2, 1)',
  base: '200ms cubic-bezier(0.4, 0, 0.2, 1)',
  slow: '300ms cubic-bezier(0.4, 0, 0.2, 1)',
  slowest: '500ms cubic-bezier(0.4, 0, 0.2, 1)',
} as const;

/**
 * 设计Token统一导出
 */
export const designTokens = {
  breakpoints,
  fontSize,
  spacing,
  touchTarget,
  colors,
  zIndex,
  borderRadius,
  shadows,
  transitions,
} as const;

/**
 * TypeScript类型导出
 */
export type Breakpoints = typeof breakpoints;
export type FontSize = typeof fontSize;
export type Spacing = typeof spacing;
export type TouchTarget = typeof touchTarget;
export type Colors = typeof colors;
export type ZIndex = typeof zIndex;
export type BorderRadius = typeof borderRadius;
export type Shadows = typeof shadows;
export type Transitions = typeof transitions;
export type DesignTokens = typeof designTokens;
